export function loadJScript(ak) {
	return new Promise(function(resolve, reject) {
		window.init = function() {
			resolve(loadJScript)
		}
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = `//api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=init`;
		script.onerror = reject
		document.body.appendChild(script);

	})
}

export function createDOM() { // 自定义展示内容
    var div = document.createElement('div');
    div.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
    div.style.backgroundColor = this.properties.bgColor;
		div.style.border = '2px solid #ffffff';
		div.style.boxShadow = '-1px -1px 4px rgba(0,0,0,0.1), 2px -1px 4px rgba(0,0,0,0.1),-1px 1px 4px rgba(0,0,0,0.1),1px 1px 4px rgba(0,0,0,0.1)';
    div.style.color = '#333';
    div.style.height = '30px';
    div.style.width = '30px';
    div.style.padding = '4px';
    // div.style.lineHeight = '30px';
    div.style.whiteSpace = 'nowrap';
    div.style.MozUserSelect = 'none';
    div.style.fontSize = '12px';
    div.style.borderRadius = '10px';
    div.style.display = 'flex';
		div.style.opacity = '100';
		// div.style.display = 'none';
    div.style.justifyContent = 'center';
    div.style.alignItems = 'center';
    // div.style.flexDirection = 'column';
		div.style.boxSizing = 'border-box';
		div.style.position = 'relative';
		div.style.transition = 'all 100ms';
		div.className = this.properties.routeType + ' marker-box marker-' + this.properties.index;

    var title = document.createElement('div');
		title.className = 'marker-title';
    title.style.display = 'block';
		title.style.width = '70px';
		title.style.top = '40px';
		title.style.textAlign = 'center';
    title.style.lineHeight = '14px';
    title.style.fontSize = '11px';
    // title.style.fontWeight = '500';
		title.style.whiteSpace = 'normal';
		title.style.position = 'absolute';
		title.style.zIndex = 999999;
		title.style.transition = 'all 100ms';
		title.style.textShadow = '-1px -1px 0 #fff, 1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff';
    div.appendChild(title);
    title.appendChild(document.createTextNode(this.properties.title));

    // var span = document.createElement('span');
    // span.style.wordWrap = 'break-word';
    // span.style.lineHeight = '16px';
    // span.style.wordWrap = 'break-word';
    // span.style.whiteSpace = 'normal';
    // span.style.padding = '10px';
    // span.style.color = '#666';
    // div.appendChild(span);
    // span.appendChild(document.createTextNode(this.properties.text));

    let img = document.createElement('img');
		img.className = 'marker-img';
    img.style.width = '22px';
		img.style.height = '22px';
		img.style.borderRadius = '8px';
    img.src = this.properties.imgSrc;
    div.appendChild(img);

    var arrow = document.createElement('div');
    arrow.style.position = 'absolute';
    arrow.style.top = '26px';
    arrow.style.left = '5px';
    arrow.style.width = '0';
    arrow.style.height = '0';
    arrow.style.borderColor = this.properties.bgColor + ' transparent transparent transparent';
    arrow.style.borderStyle = 'solid';
    arrow.style.borderWidth = '8px';
    arrow.style.overflow = 'hidden';
    div.appendChild(arrow);

    // div.onmouseover = function () {
    //     this.style.backgroundColor = this.properties.bgColor;
    //     this.style.color = '#fff';
    //     span.style.color = '#fff';
    //     arrow.style.top = '164px';
    //     arrow.style.borderColor = this.properties.bgColor + ' transparent transparent transparent';
    // };

    // div.onmouseout = function () {
    //     this.style.backgroundColor = this.properties.bgColor;
    //     this.style.color = '#333';
    //     span.style.color = '#333';
    //     arrow.style.borderColor = 'white transparent transparent transparent';
    // };
    return div;
}